<template>
  <!-- 我的收藏 -->
  <div class="box">
    <div class="zbc" v-if="zbc">
      <div class="shangjia" v-if="shangjiaShow">
        <p>确定要取消所选收藏吗？</p>
        <div class="d1" @click="guanShangjia">取消</div>
        <div class="d2" @click="quedingShangjia">确定</div>
      </div>
    </div>
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="4"></ceList>
      <div class="con">
        <div class="leibie">
          <div class="anniu">
            <div :class="leibie == 1 ? 'xuan' : ''" @click="leibieClick(1)">房源</div>
            <div :class="leibie == 2 ? 'xuan' : ''" @click="leibieClick(2)">店铺</div>
            <div :class="leibie == 3 ? 'xuan' : ''" @click="leibieClick(3)">经纪人</div>
            <div :class="leibie == 4 ? 'xuan' : ''" @click="leibieClick(4)">文章</div>
            <div :class="leibie == 5 ? 'xuan' : ''" @click="leibieClick(5)">楼盘</div>
          </div>
          <span @click="binaji">{{ checkboxShow ? '完成' : '编辑' }}</span>
        </div>
        <div v-if="leibie == 1">
          <div class="list">
            <div class="li" style="display: flex;" v-for="(item, index) in collectList" :key="index"
              v-if="collectTotal > 0">
              <template v-if="checkboxShow">
                <div v-if="!item.choose"
                  style="font-size: 50px;line-height: 154px;color: #D1D1D1;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)">○</div>
                <p v-else class="el-icon-success"
                  style="font-size: 30px;line-height: 154px;color: #64B6A8;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)"></p>
              </template>
              <!-- <el-checkbox v-model="item.choose" :key="index" v-if="checkboxShow"></el-checkbox> -->
              <img class="img" @click="details(item)" style="object-fit: contain;background-color: #00000033;"
                :src="item.display_diagram ? item.display_diagram : $img + item.houseImageDiv" />
              <img class="shangb" src="../../assets/haveDeleted.png" v-if="item.delFlag == 1" />
              <img class="shangb" src="../../assets/beenSold.png"
                v-else-if="item.status == 1 && item.transactionType == 2" />
              <img class="shangb" src="../../assets/beenLease.png"
                v-else-if="item.status == 1 && item.transactionType == 1" />
              <img class="shangb" src="../../assets/grounding.png" v-else-if="item.status == 0 && item.upStatus == 1" />
              <img class="shangb" src="../../assets/removeShelves.png" v-else-if="item.upStatus == 0" />
              <div class="wenzi">
                <p class="p1" style="cursor: pointer;" @click="details(item)"><tag-view :item='item'></tag-view>{{
                  item.title }}</p>
                <p class="p2" @click="details(item)">{{ item.region }} {{ item.address }}</p>
                <p class="p3" @click="details(item)">
                  <span>{{ item.houseType }}</span>
                  <span>{{ item.area }}m²</span>
                  <span>{{ item.foors }}</span>
                </p>
                <p class="p4">
                  <img @click="toAgent(item.userId)" v-if="item.image != null" :src="item.image" />
                  <img @click="toAgent(item.userId)" v-else src="../../assets/touxiang.png" />
                  <span @click="toAgent(item.userId)" style="margin-left: 7px;">{{ item.nikeName }}</span>
                  <span class="gong" @click="shopdetails(item.shopId)">{{ item.shopName }}</span>
                </p>
              </div>
              <div class="jiage">
                <p class="p1" v-if="item.transactionType == 1">{{ item.price }}元</p>
                <p class="p1" v-if="item.transactionType == 2">{{ item.price }}万</p>
                <p class="p2" v-if="item.transactionType == 2">{{ (item.price * 10000 / item.area).toFixed(2) }}元/m²</p>

              </div>
            </div>
            <div class="li" v-if="collectTotal == 0" style="width: 100%;height: 400px;">
              <el-empty description="还没有收藏过房源"></el-empty>
            </div>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <el-checkbox v-model="select" @change="selectColl">{{ select ? '取消全选' : '全选' }}</el-checkbox>
            <div class="anniu" @click="shangjia">取消收藏</div>
          </div>
        </div>
        <div v-if="leibie == 2">
          <div class="list">
            <div class="li" style="display: flex;cursor: pointer;" v-for="(item, index) in collectList" :key="index"
              v-if="collectTotal > 0">
              <template v-if="checkboxShow">
                <div v-if="!item.choose"
                  style="font-size: 50px;line-height: 154px;color: #D1D1D1;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)">○</div>
                <p v-else class="el-icon-success"
                  style="font-size: 30px;line-height: 154px;color: #64B6A8;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)"></p>
              </template>
              <img class="img" :src="item.image" style="object-fit: contain;background-color: #00000033;"
                @click="shopdetails(item.id)" />
              <div class="wenzi" @click="shopdetails(item.id)">
                <p class="p1">{{ item.shopName }}</p>
                <p class="p2">地址：{{ item.shopArea }} {{ item.shopAddress }}</p>
                <p class="p5">
                  <span style="color:red;font-size:22px;margin-right: 21px;">{{ item.houseNum }}套</span>
                  <span style="font-size:14px;">在售/在租</span>
                </p>
              </div>
            </div>
            <div class="li" v-if="collectTotal == 0" style="width: 100%;height: 400px;">
              <el-empty description="还没有收藏店铺"></el-empty>
            </div>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <el-checkbox v-model="select" @change="selectColl">{{ select ? '取消全选' : '全选' }}</el-checkbox>
            <div class="anniu" @click="shangjia">取消收藏</div>
          </div>
        </div>
        <div v-if="leibie == 3">
          <div class="list1">
            <div class="li" v-for="(item, index) in collectList" :key="index" v-if="collectTotal > 0">
              <template v-if="checkboxShow">
                <div v-if="!item.choose"
                  style="width: 18px;height: 18px;border-radius: 18px;position: relative;left: 10px;top: 40%;cursor: pointer;border: #BBBBBB 1px solid;"
                  @click="choosehouse(item.id)"></div>
                <div v-else
                  style="width: 20px;height: 20px;border-radius: 20px;position: relative;left: 10px;top: 40%;cursor: pointer;color: #FFFFFF;background-color: #64B6A8;text-align: center;line-height: 20px;"
                  @click="choosehouse(item.id)">√</div>
              </template>
              <img @click="toAgent(item.id)" class="touxiang" :src="item.image"
                style="object-fit: contain;background-color: #00000033;" />
              <div @click="toAgent(item.id)" class="name" style="cursor: pointer;">{{ item.nikeName }}</div>
              <div class="pingfen">
                <div>评分</div>
                <img v-for="(item1, index) in Number(item.score)" :key="index" src="../../assets/xin_liang.png" />
                <img v-for="(item1, index) in 5 - item.score" :key="index" src="../../assets/xin_hui.png" />
              </div>
              <div class="weigui">
                <div class="wei">
                  <span>违规次数</span>
                  <span>></span>
                  <span style="color:red;font-weight: 600;font-size: 20px;">{{ item.reportCount }}</span>
                </div>
                <img style="margin-left: 20px;" @click="chat(item.id)" src="../../assets/xiaoxi_lan.png" />
                <el-tooltip class="item" effect="dark" :content="item.phone" placement="top-start">
                  <img src="../../assets/dianhua_lan.png" />
                </el-tooltip>
              </div>
            </div>
            <div v-if="collectTotal == 0" style="height: 450px;">
              <el-empty description="还没有收藏经纪人"></el-empty>
            </div>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <el-checkbox v-model="select" @change="selectColl">{{ select ? '取消全选' : '全选' }}</el-checkbox>
            <div class="anniu" @click="shangjia">取消收藏</div>
          </div>
        </div>
        <div v-if="leibie == 4">
          <div class="list">
            <div class="li" style="display: flex;cursor: pointer;" v-for="(item, index) in collectList" :key="index"
              v-if="collectTotal > 0">
              <template v-if="checkboxShow">
                <div v-if="!item.choose"
                  style="font-size: 50px;line-height: 154px;color: #D1D1D1;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)">○</div>
                <p v-else class="el-icon-success"
                  style="font-size: 30px;line-height: 154px;color: #64B6A8;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)"></p>
              </template>
              <img class="img" :src="$img + item.image" style="object-fit: contain;background-color: #00000033;"
                @click="kddetails(item.id)" />
              <div class="wenzi" @click="kddetails(item.id)">
                <p class="p1">{{ item.title }}</p>
                <p class="p6">
                  <span>{{ item.author }}</span>
                  <span>{{ item.createDate }}</span>
                </p>
              </div>
            </div>
            <div class="li" v-if="collectTotal == 0" style="width: 100%;height: 400px;">
              <el-empty description="还没有收藏文章"></el-empty>
            </div>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <el-checkbox v-model="select" @change="selectColl">{{ select ? '取消全选' : '全选' }}</el-checkbox>
            <div class="anniu" @click="shangjia">取消收藏</div>
          </div>
        </div>
        <div v-if="leibie == 5">
          <div class="list">
            <div class="li" style="display: flex;cursor: pointer;" v-for="(item, index) in collectList" :key="index"
              v-if="collectTotal > 0">
              <template v-if="checkboxShow">
                <div v-if="!item.choose"
                  style="font-size: 50px;line-height: 154px;color: #D1D1D1;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)">○</div>
                <p v-else class="el-icon-success"
                  style="font-size: 30px;line-height: 154px;color: #64B6A8;margin-right: 10px;cursor: pointer;"
                  @click="choosehouse(item.id)"></p>
              </template>
              <img class="img" :src="$img + item.image" style="object-fit: contain;background-color: #00000033;"
                @click="storeydetails(item.id)" />
              <img class="shangb" src="../../assets/zai.png" v-show="item.isOpen == 1" />
              <img class="shangb" src="../../assets/wei.png" v-show="item.isOpen == 0" />
              <div class="wenzi" @click="storeydetails(item.id)">
                <p class="p1"><tag-view :item='item'></tag-view>{{ item.title }}</p>
                <p class="p2">地址：{{ item.address }}</p>
                <p class="p5">
                  <!-- <p class="p1"> -->
                  <span>均价</span>
                  <span style="font-size: 22px; color: red">{{
                    item.averagePrice
                  }}</span>
                  <span v-if="!isNaN(item.averagePrice)">元/㎡</span>
                  <!-- </p> -->
                </p>
              </div>
            </div>
            <div class="li" v-if="collectTotal == 0" style="width: 100%;height: 400px;">
              <el-empty description="还没有收藏楼盘"></el-empty>
            </div>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <el-checkbox v-model="select" @change="selectColl">{{ select ? '取消全选' : '全选' }}</el-checkbox>
            <div class="anniu" @click="shangjia">取消收藏</div>
          </div>
        </div>
      </div>
    </div>
    <floor></floor>
    <chat ref="chats"></chat>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
import chat from "../../components/chat.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
    chat,
  },
  data() {
    return {
      zbc: false,
      shouyeShow: false,
      shangjiaShow: false,
      xuan: 4,
      leibie: 1,
      radioCities: "",
      checkboxShow: false,
      user: {},
      collectPage: {
        pageSize: 3,
        pageNo: 1,
        userId: '',
        type: 1,
        cbType: 1,
      },
      collectList: [],
      collectTotal: 0,
      select: false,
    };
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"))
      if (user != null) {
        this.loginstate = true
        this.user = user
        this.collectPage.userId = user.id
        this.getUserCollection()
      } else {
        this.loginstate = false
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        this.$router.push("/");
      }
    },
    getUserCollection() {
      this.$getHttp('/mob/user/getUserCollection', this.collectPage).then((data) => {
        if (data.code == 200) {
          data.page.list.forEach((e) => {
            e.choose = false
            if (this.leibie == 1) {
              if (e.hasOwnProperty("floor")) {
                if (e.floor.indexOf("|") == -1) {
                  e.floor = ''
                } else {
                  e.floor = e.floor.split("|")[0] + "层/" + "共" + e.floor.split("|")[1] + "层";
                }
              }
              if (!e.hasOwnProperty("shopName") || e.shopName == '') {
                e.shopName = "个人房源";
              }
            }
            if (this.leibie == 5) {
              e.image = e.showImg.split('|')[0]
            }
            if (this.leibie == 2) {
              e.image = e.image.split('|')[0]
            }
          });
          // console.log(data.page.list);
          this.collectList = data.page.list
          this.collectTotal = data.page.count
        }
      })
    },
    storeydetails(id) {
      this.openUrl({
        path: "/index/storeyDetails",
        query: {
          id: id
        }
      });
    },
    collectCurrentChange() {

    },
    choosehouse(id) {
      this.collectList.forEach((e) => {
        if (e.id == id) {
          e.choose = !e.choose
        }
      })
    },
    toAgent(id) {
      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: id
        }
      });
    },
    selectColl(type) {
      this.collectList.forEach((e) => {
        e.choose = type
      })
    },
    kddetails(id) {
      this.openUrl({
        path: "/index/particulars",
        query: {
          id: id,
          type: 'watch'
        }
      });
    },
    CollectCurrentChange(e) {
      this.collectPage.pageNo = e
      this.getUserCollection()
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层共" + fool[3] + "层";
      if (fool[0] == 3) return "共层" + fool[1] + "层";
    },
    shangjia() {
      let i = 0;
      this.collectList.forEach((e) => {
        if (e.choose) {
          i++
        }
      })
      if (i > 0) {
        this.zbc = true;
        this.shangjiaShow = true;
        document.documentElement.style.overflow = "hidden";
      } else {
        this.$message({
          message: "请选择收藏信息！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }

    },
    //开启聊天
    chat(id) {
      this.$refs.chats.chatOpne(id)
    },
    quedingShangjia() {
      this.zbc = false;
      this.shangjiaShow = false;
      let delColl = []
      this.collectList.forEach((e) => {
        if (e.choose) {
          delColl.push(e.id)
        }
      })
      this.$postHttp('/mob/user/delUserCollection', {
        cbType: this.leibie,
        type: 1,
        userId: this.user.id,
        ids: String(delColl),
        delType: 2
      }).then((data) => {
        if (data.code == 200) {
          this.$message({
            message: "取消收藏成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });
          this.initCollect()
        }
      })
      console.log(String(delColl))
      document.documentElement.style.overflow = "";
    },
    guanShangjia() {
      this.zbc = false;
      this.shangjiaShow = false;
      document.documentElement.style.overflow = "";
    },
    initCollect() {
      this.collectPage.pageNo = 1
      this.getUserCollection()
    },
    details(item) {
      if (item.delFlag == 1 || item.upStatus == 0 || item.status == 1) {
        this.$message({
          message: "该房源已不存在或已租售",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return
      }
      if (item.transactionType == 1) {
        this.openUrl({
          path: "/index/leaseDetails",
          query: {
            id: item.id
          }
        });
      } else {
        this.openUrl({
          path: "/index/newHouseDetails",
          query: {
            id: item.id
          }
        });
      }
    },
    toAgent(id) {
      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: id
        }
      });
    },
    shopdetails(id) {
      if (id != undefined && id != '') {
        this.openUrl({
          path: "/index/ShopDetails",
          query: {
            id: id
          }
        });
      } else {
        this.$message({
          message: "个人房源！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    leibieClick(num) {
      this.collectPage.pageSize = 3
      if (num == 3) {
        this.collectPage.pageSize = 6
      }
      this.leibie = num;
      this.collectPage.cbType = num
      this.collectPage.pageNo = 1
      this.getUserCollection()
      // 全选取消
      this.select = false
    },
    binaji() {
      this.checkboxShow = !this.checkboxShow;
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.zbc {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9;

  .shouye {
    position: absolute;
    width: 430px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    overflow: hidden;

    .name {
      margin-top: 40px;
      margin-left: 28px;
      font-size: 20px;

      p {
        display: inline-block;
        vertical-align: top;
      }
    }

    .tian {
      margin-top: 20px;
      margin-left: 28px;

      p {
        display: inline-block;
        vertical-align: middle;
        font-size: 20px;
      }

      .div {
        display: inline-block;
        width: 110px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #64b6a8;
        border-radius: 37px;
        overflow: hidden;
        vertical-align: middle;

        /deep/.el-input__inner {
          border: 0;
          font-size: 20px;
          color: #64b6a8;
          padding: 0 20px;
        }
      }
    }

    .p1 {
      width: 376px;
      font-size: 18px;
      color: #ea4b4b;
      margin-left: 28px;
      margin-top: 25px;
    }

    .quxiao {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 216px;
      height: 65px;
      line-height: 65px;
      background: #f2f2f2;
      color: #333;
      font-size: 21px;
      text-align: center;
      cursor: pointer;
    }

    .queding {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 216px;
      height: 65px;
      line-height: 65px;
      background: #64b6a8;
      color: #fff;
      font-size: 21px;
      text-align: center;
      cursor: pointer;
    }
  }

  .shangjia {
    position: absolute;
    width: 430px;
    height: 216px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    overflow: hidden;

    p {
      font-size: 24px;
      width: 100%;
      margin-top: 58px;
      text-align: center;
    }

    div {
      position: absolute;
      bottom: 40px;
      width: 115px;
      height: 42px;
      box-sizing: border-box;
      border-radius: 22px;
      font-size: 21px;
      text-align: center;
      line-height: 42px;
      cursor: pointer;
    }

    .d1 {
      color: #64b6a8;
      left: 85px;
      border: 1px solid #64b6a8;
    }

    .d2 {
      background-color: #64b6a8;
      color: #fff;
      right: 85px;
    }
  }
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;
  border: 1px solid #e0e0e0;

  .leibie {
    position: relative;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #e0e0e0;

    .anniu {
      position: absolute;
      left: 34px;
      bottom: 28px;

      div {
        display: inline-block;
        margin-right: 54px;
        font-size: 20px;
        cursor: pointer;
      }

      .xuan {
        transform: scale(1.2);
        color: #64b6a8;
      }
    }

    span {
      display: inline-block;
      position: absolute;
      width: 70px;
      height: 34px;
      background: #e0e0e0;
      border-radius: 22px;
      text-align: center;
      line-height: 34px;
      color: #333;
      top: 22px;
      right: 20px;
      cursor: pointer;
    }
  }

  .list {
    margin-top: 33px;
    margin-left: 32px;

    .li {
      position: relative;
      margin-bottom: 32px;
      cursor: pointer;

      .shangb {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 104px;
        height: 85px;
      }

      .img {
        width: 230px;
        height: 154px;
      }

      .wenzi {
        display: inline-block;
        vertical-align: top;
        width: 350px;
        height: 154px;
        margin-left: 14px;

        .p1 {
          font-size: 20px;
          color: #333333;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .p2 {
          font-size: 14px;
          color: #666666;
          margin-top: 8px;
          margin-bottom: 8px;
        }

        .p3 {
          font-size: 14px;
          color: #666666;
        }

        .p4 {
          position: absolute;
          bottom: 0;

          img {
            width: 30px;
            height: 30px;
            cursor: pointer;
            border-radius: 30px;
          }

          span {
            font-size: 14px;
            vertical-align: middle;
          }

          .gong {
            display: inline-block;
            /* width: 68px; */
            height: 23px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 23px;
            color: #64b6a8;
            margin-left: 10px;
            cursor: pointer;
            padding: 0 5px;
          }
        }

        .p5 {
          position: absolute;
          bottom: 0;
          color: #666666;
        }

        .p6 {
          position: absolute;
          bottom: 0;

          span {
            font-size: 14px;
            display: block;
            margin-top: 10px;
          }
        }
      }

      .jiage {
        position: absolute;
        width: 140px;
        top: 45px;
        right: 24px;

        p {
          text-align: center;
        }

        .p1 {
          font-size: 26px;
          color: red;
        }

        .p2 {
          font-size: 12px;
          color: #333;
          margin-top: 10px;
        }
      }

      .el-checkbox {
        vertical-align: middle;
        margin-right: 20px;
      }

      /deep/.el-checkbox__inner {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 8px;
        height: 18px;
        left: 11px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }
  }

  .list1 {
    margin-top: 10px;

    .li {
      display: inline-block;
      box-sizing: border-box;
      margin-left: 40px;
      width: 260px;
      height: 340px;
      border: 1px solid #d0d0d0;
      margin-bottom: 15px;

      .touxiang {
        cursor: pointer;
        width: 144px;
        height: 180px;
        margin-top: 14px;
        margin-left: 58px;
      }

      .name {
        width: 100%;
        text-align: center;
        font-size: 17px;
        color: #333333;
        margin-top: 11px;
      }

      .pingfen {
        margin-top: 15px;

        div {
          display: inline-block;
          vertical-align: middle;
          font-size: 13px;
          margin-left: 33px;
          margin-right: 15px;
        }

        img {
          vertical-align: middle;
          width: 26px;
          height: 26px;
          margin-right: 3px;
        }
      }

      .weigui {
        margin-top: 19px;

        .wei {
          display: inline-block;
          vertical-align: middle;
          font-size: 13px;
          margin-left: 33px;
          cursor: pointer;

          span {
            vertical-align: middle;
            margin-right: 10px;
          }
        }

        img {
          vertical-align: middle;
          width: 25px;
          height: 25px;
          margin-right: 6px;
          cursor: pointer;
        }
      }
    }

    .lixuan {
      opacity: 0.4;
    }
  }

  .fenye {
    width: 100%;
    height: 50px;
    text-align: center;
    margin-bottom: 50px;
  }

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }

  .caozuo {
    position: relative;
    width: 100%;
    height: 90px;
    border-top: 1px solid #e0e0e0;

    .shan {
      position: absolute;
      font-size: 20px;
      color: #333;
      top: 30px;
      left: 75px;
      cursor: pointer;
    }

    .anniu {
      position: absolute;
      right: 24px;
      top: 24px;
      width: 120px;
      height: 42px;
      line-height: 42px;
      font-size: 19px;
      cursor: pointer;
      color: #fff;
      background-color: #64b6a8;
      border-radius: 21px;
      text-align: center;
    }

    .el-checkbox {
      position: absolute;
      top: 25px;
      left: 30px;
    }

    /deep/.el-checkbox__inner {
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }

    /deep/.el-checkbox__inner::after {
      border: 2px solid #fff;
      width: 8px;
      height: 18px;
      left: 11px;
      top: 4px;
      border-left: 0;
      border-top: 0;
    }

    /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
    /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #64b6a8;
      border-color: #64b6a8;
    }
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}
</style>